<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代办事项列表</title>
    <style>
            .completed-class {
              background: #eaeaea;
              text-decoration: line-through;
            }
          </style>
</head>
<body>
        <div id="app">
                <h1>待办事项列表</h1>
                <div>
                  <input
                    ref="inputRef"
                    type="text"
                    placeholder="请输入新待办事项"
                    v-model.trim="inputValue"
                    @keydown.enter="addTodoItem"
                  >
                  <!-- <input type="text" placeholder="请输入新待办事项" :value="inputValue" @input="handleInput"> -->
                  <button @click="addTodoItem">添加</button>
                </div>
                <div>
                  <div>所有待办事项</div>
                  <div v-if="todos.length === 0">待办事项列表为空</div>
                  <ul v-else>
                    <li v-for="todo in todos">
                      <span :class="{'completed-class': todo.completed}" :style="{display: 'inline-block'}">{{ todo.id }} - {{ todo.title }} - {{ todo.completed ? '已完成' : '未完成' }} </span>
                      <button @click="toggleTodoItem(todo.id)">标记为{{todo.completed ? '未' : '已'}}完成</button>
                      <button @click="removeTodoItem(todo.id)">删除</button>
                    </li>
                  </ul>
                </div>
              </div>
            
              <script src="./lib/vue.js"></script>
              <script>
                let index = 2 // 全局编号
                const vm = new Vue({
                  el: '#app',
                  data: {
                    // 文本框中绑定的数据
                    inputValue: '初始值',
                    // 定义数组保存所有待办事项
                    todos: [{
                      id: 1,
                      title: '复习HTML',
                      completed: false
                    }]
                  },
                  methods: {
                    // // 处理输入框输入事件
                    // handleInput(event) {
                    //   this.inputValue = event.target.value
                    // },
                    // 添加新待办事项
                    addTodoItem() {
                      // 文本框自动获得焦点
                      // document.getElementById('input').focus()
                      // console.log(this.$refs)
                      this.$refs.inputRef.focus()
            
                      // 输入为空，则不添加
                      if (this.inputValue.length === 0) {
                        return
                      }
                      // 向数组中添加新待办事项对象
                      this.todos.push({
                        id: index++,
                        title: this.inputValue,
                        completed: false,
                      })
                      // 清空文本框
                      this.inputValue = ''
                    },
                    // 修改待办事项完成状态
                    toggleTodoItem(id) {
                      // console.log('toggle...', id)
                      this.todos.forEach(todo => {
                        if (todo.id === id) {
                          todo.completed = !todo.completed
                        }
                      })
                    },
                    // 删除待办事项
                    removeTodoItem(id) {
                      // console.log('删除：', id)
                      this.todos = this.todos.filter(todo => todo.id !== id)
                    }
                  }
                })
              </script>
</body>
</html>